<demo>
排序
</demo>
<template>
  <zeus-table
    :dataSource="dataSource"
    :columns="columns"
    :loading="loading"
    v-model:orderBy="orderBy"
    @update:orderBy="x"
  ></zeus-table>
</template>

<script lang="ts">
import zeusTable from '../../lib/table/Table.vue'
import { ref } from 'vue'
export default {
  components: {
    zeusTable,
  },
  setup(props) {
    let dataSource = [
      { id: 20, name: '蜘蛛侠', score: 100 },
      { id: 21, name: '蝙蝠侠', score: 99 },
      { id: 22, name: '姚明', score: 100 },
      { id: 23, name: '科比', score: 99 },
      { id: 24, name: '勒布朗', score: 100 },
      { id: 25, name: '詹姆斯', score: 99 },
    ]

    let columns = [
      { title: '姓名', prop: 'name', width: '100' },
      { title: '分数', prop: 'score' },
    ]
    let orderBy = ref({
      score: 'asc',
    })
    // table 加载时
    let loading = ref(false)
    // 对数据排序操作
    const x = () => {
      loading.value = true
      setTimeout(() => {
        dataSource = dataSource.sort((a, b) => a.score - b.score)
        loading.value = false
      }, 3000)
    }

    return {
      dataSource,
      columns,
      loading,
      orderBy,
      x,
    }
  },
}
</script>

<style></style>
